<template>
    <div id='mainTemplate' class="Main">


        <span class='infor' v-if='showAccess'>访问信息</span>

        <div class='AccessInfor' v-if='showAccess'>
            <!--显示的内容-->
            <div class="oneItem">

                <el-form :label-position='firstlabelPosition' label-width="94px" style='width:100%;text-align:left;'>
                    <el-form-item label="访问来源">
                            {{AccessSource}}
                    </el-form-item>
                    <el-form-item label="访问着陆页">
                        <span class='referer'>{{referer}}</span>
                    </el-form-item>
                    <el-form-item label="接入渠道">
                         {{greetingType}}
                    </el-form-item>
                    <el-form-item label="排队时长">
                        {{QueueLength}}
                    </el-form-item>
                    <el-form-item label="IP地址">
                       {{ipAdd}}
                    </el-form-item>
                    <el-form-item label="终端">
                        {{browser}}
                    </el-form-item>
                     <el-form-item label="系统">
                        {{os}}
                    </el-form-item>
                </el-form>
            </div>

        </div>


        <span class='infor cuos' v-if='showAccess'>客户信息</span>
        <div class='CustomerInfor'>
            <p>
                <a @click="showUser" class="aaa" href="#"  v-if='showEdit'></a>
            </p>

            <!--显示的内容-->
            <div class="oneItem"  v-if='showEdit'>

                   <el-form :label-position='firstlabelPosition' label-width="94px" style='text-align:left;width:93%;margin:0 auto;'>
                    <el-form-item label="客户头像">
                        <p class='userImg'>
                            <img :src='userIMG'>
                        </p>
                    </el-form-item>
                    <el-form-item label="客户昵称">
                         {{nickName}}
                    </el-form-item>
                     <el-form-item label="真实姓名">
                         {{realName}}
                    </el-form-item>
                     <el-form-item label="来源">
                         {{AccessSource}}
                    </el-form-item>
                     <el-form-item label="邮箱">
                         {{email}}
                    </el-form-item>
                     <el-form-item label="电话">
                         {{phone}}
                    </el-form-item>

                     <el-form-item label="公司">
                        {{company}}
                    </el-form-item>
                     <el-form-item label="城市">
                        {{city}}
                    </el-form-item>
                     <el-form-item label="QQ">
                        {{qq}}
                    </el-form-item>
                     <el-form-item label="标签">
                       <span v-for='(item,index) in label' :key='index'>
                          {{item.title}}
                       </span>
                    </el-form-item>
                     <el-form-item label="备注">
                         {{remark}}
                    </el-form-item>
                </el-form>


            </div>


            <!--修改显示的内容-->
            <div class="secondItem"  v-if='edithide'>

                <el-form :label-position='labelPosition' style='width:93%;margin:0 auto;'>
                    <el-form-item label="客户头像">
                        <p class='userImg'>
                            <img :src='userIMG'>
                        </p>
                    </el-form-item>
                    <el-form-item label="客户昵称">
                         <el-input v-model="nickName"></el-input>
                    </el-form-item>
                     <el-form-item label="真实姓名">
                         <el-input v-model="nameReal"></el-input>
                    </el-form-item>

                    <el-form-item label="来源">
                        <p>{{AccessSource}}</p>
                         <!--  -->
                    </el-form-item>
                     <el-form-item label="邮箱">
                         <el-input v-model="emailSecond"></el-input>
                    </el-form-item>
                     <el-form-item label="电话">
                         <el-input v-model="phoneSecond"></el-input>
                    </el-form-item>

                     <el-form-item label="公司">
                         <el-input v-model="companySecond"></el-input>
                    </el-form-item>
                     <el-form-item label="城市">
                          <el-cascader
                                v-model="cityCurrent"
                                :options="cityOptions"
                                @change="changeProvince"
                                change-on-select
                          >
                        </el-cascader>
                    </el-form-item>


                      <el-form-item label="QQ" prop="qq">
                          <el-input v-model="qqSecond"></el-input>
                      </el-form-item>

                        <el-form-item label="标签">
                            <el-select v-model="value5" multiple placeholder="请选择">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input v-model="remark"></el-input>
                        </el-form-item>
                    </el-form>




                <div class="btnGroupEdit">
                    <el-button type="primary" @click="cancelUser">取消</el-button>
                    <el-button type="primary" @click='submitUserInfor'>保存</el-button>
                </div>

            </div>
        </div>

        <div class='notInfor'  v-if='notINFOR'>
            <i class='img'></i>
            <p>暂无客户资料</p>
        </div>


    </div>
</template>

<script>
import user from "../../libs/userInfor";
import chat from "../../libs/chat";
import cityOptions from "../../libs/oldcity";
import contentQ from "../contentQ";

export default {
  name: "user-infor",

  data() {
    var validateRealName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("真实姓名不能为空"));
      }
      console.log(value);
    };

    return {
      qqSecond: "", //qq
      firstlabelPosition: "right",
      labelPosition: "right",
      showAccess: false,
      showEdit: false,
      edithide: false,
      notINFOR: true,
      userId: "", //用户的id
      // UserData:[],   //用户的信息
      imageUrl: "",
      userIMG: "", //用户头像
      nickName: "", //用户昵称
      realName: "", //真实姓名
      nameReal: "",
      source: "", //来源
      email: "", //邮箱
      phone: "", //电话
      company: "", //公司
      city: "", //城市
      subCity: "",
      label: [], //标签
      remark: "", //备注
      cityCurrent: [],
      cityOptions: cityOptions, //城市
      options: "",
      value5: [],
      labelsData: "",
      page: 1,
      limit: 20,
      type: 1,
      AccessSource: "", //访客来源
      referer: "", //访问着陆页
      greetingType: "", //接入渠道
      QueueLength: "--", //排队时长
      ipAdd: "", //ip地址
      browser: "", //终端
      os: "", //系 统
      emailSecond: "", //邮箱
      phoneSecond: "", //电话
      companySecond: "", //公司

     
    };
  },

  methods: {
    // 请求当前用户的信息
    hasUserInfor(currentUserId, res) {
      let _self = this;
      _self.userId = currentUserId;
      _self.edithide = false;
      console.log(res);
      if (res.code === 400) {
        _self.showAccess = false;
        _self.showEdit = false;
        _self.edithide = false;
        _self.notINFOR = true;
        _self.notINFOR = true;
      } else {
        
        _self.notINFOR = false;
        _self.showAccess = true;
        _self.showEdit = true;
        _self.edithide = false;
        let AccessInforData = res.data.redis; //访客信息
        switch (AccessInforData.greetingType) {
          case "desktop":
            _self.greetingType = "桌面网站";
            break;
          case "h5":
            _self.greetingType = "移动网站";
            break;
          case "app":
            _self.greetingType = "手机应用";
            break;
          case "wechat":
            _self.greetingType = "微信端";
            break;
          case "weibo":
            _self.greetingType = "微博端";
            break;
        }

        switch (AccessInforData.source) {
          case 1:
            _self.AccessSource = "客户中心";
            break;
          case 2:
            _self.AccessSource = "桌面网站";
            break;
          case 3:
            _self.AccessSource = "移动网站";
            break;
          case 4:
            _self.AccessSource = "微信";
            break;
          case 5:
            _self.AccessSource = "微博";
            break;
          case 6:
            _self.AccessSource = "APP";
            break;
        }

        if (AccessInforData.referer == null) {
          _self.referer = "--";
        } else {
          _self.referer = AccessInforData.referer; //访问着陆页
        }
        _self.ipAdd = AccessInforData.ip; //ip地址
        _self.browser = AccessInforData.browser; //终端
        _self.os = AccessInforData.os; //系统

        let data = res.data.db;

        if (data != null) {
          if (data.head_img) {
            _self.userIMG = data.head_img;
          } else {
            _self.nickName = AccessInforData.logo;
          }
          if (data.nickname) {
            _self.nickName = data.nickname;
          } else {
            _self.nickName = AccessInforData.name;
          }

          if (data.realname) {
            _self.realName = data.realname;
            _self.nameReal = data.realname;
          } else {
            _self.realName = "--";
            _self.nameReal = '';
          }

          if (data.source) {
            _self.source = data.source;
          } else {
            _self.source = AccessInforData.source;
          }

          if (data.email) {
            _self.email = data.email;
            _self.emailSecond = data.email;
          } else {
            _self.email = "--";
             _self.emailSecond = '';
          }
          //标签
          if (data.labels) {
            let dataLabel = data.labels;
            for (let i = 0; i < dataLabel.length; i++) {
              this.value5.push(dataLabel[i].id);
            }
            this.getLabel();
           
          } else {
            this.value5 = [];
            this.label = "--";
          }

          if (data.phone) {
            _self.phone = data.phone;
            _self.phoneSecond = data.phone;
          } else {
            _self.phoneSecond = '';
            _self.phone = "--";
          }

          if (data.company) {
            _self.company = data.company;
            _self.companySecond = data.company;
          } else {
            _self.companySecond = '';
            _self.company = "--";
          }

          if (data.qq) {
            _self.qq = data.qq;
          } else {
            _self.qq = "--";
          }
          if (data.city) {
            _self.subCity = data.city;
            this.getCity(data.city);
          } else {
            _self.city = "--";
            _self.cityCurrent = [];
          }
          if (data.remark) {
            _self.remark = data.remark;
          } else {
            _self.remark = "--";
          }
          _self.showEdit = true;
          _self.showAccess = true;
          _self.edithide = false;
        } else {
          _self.userIMG = "--";
          _self.email = "--";
          _self.phone = "--";
          _self.company = "--";
          _self.city = "--";
          _self.qq = "--";
          _self.remark = "--";
          _self.label = "--";
          _self.nickName = AccessInforData.name;
          _self.realName = "未知用户";
          _self.source = AccessInforData;
          switch (AccessInforData.source) {
            case 1:
              _self.source = "客户中心";
              break;
            case 2:
              _self.source = "桌面网站";
              break;
            case 3:
              _self.source = "移动网站";
              break;
            case 4:
              _self.source = "微信";
              break;
            case 5:
              _self.source = "微博";
              break;
            case 6:
              _self.source = "APP";
              break;
          }
        }
      }
    },

    //获取标签列表
    getListLabels() {
      let _self = this;
      user.getListLabels(_self.page, _self.limit, "", _self.type, function(
        res
      ) {
        let data = res.data.data,
          group = [],
          labelsData = [];

        for (let i = 0; i < data.length; i++) {
          group.push({
            value: data[i].id,
            label: data[i].title
          });
          labelsData.push({
            id: data[i].id,
            title: data[i].title
          });
        }
        _self.options = group;
        _self.labelsData = labelsData;
      });
    },

    //根据转接关闭用户信息
    getshowAccess() {
      contentQ.$on("showAccess", showAccess => {
        this.showAccess = showAccess;
        this.showEdit = showAccess;
        this.notINFOR = true;
      });
    },

    //根据城市id得到相应城市
    getCity(cityId) {
      let _self = this;
      if (cityId) {
        for (let i = 0; i < _self.cityOptions.length; i++) {
          let subCity = _self.cityOptions[i].children;

          for (let j = 0; j < subCity.length; j++) {
            let third = subCity[j].children;
            if (third) {
              for (let d = 0; d < third.length; d++) {
                if (cityId === third[d].value) {
                  if (cityOptions[i].label !== subCity[j].label) {
                    console.log(
                      cityOptions[i].label,
                      subCity[j].label,
                      third[d].label
                    );
                    _self.city =
                      cityOptions[i].label +
                      "," +
                      subCity[j].label +
                      "," +
                      third[d].label;
                  } else {
                    _self.city = cityOptions[i].label + "," + third[d].label;
                  }
                  _self.cityCurrent.push(
                    cityOptions[i].value,
                    subCity[j].value,
                    third[d].value
                  );
                }
              }
            }
          }
        }
      }else{
        _self.cityCurrent = [];
      }
    },

    //根据label得到标签
    getLabel() {
      this.label = [];
      for (let j = 0; j < this.value5.length; j++) {
        for (let i = 0; i < this.labelsData.length; i++) {
          if (this.value5[j] == this.labelsData[i].id) {
            this.label.push({
              id: this.labelsData[i].id,
              title: this.labelsData[i].title
            });
          }
        }
      }
    },

    //修改并更新当前用户的信息
    submitUserInfor() {
      let _self = this;
      console.log();
      user.changeUserInfor(
            _self.userId,
            _self.imageUrl,
            _self.nickName,
            _self.nameReal,
            _self.source,
            _self.emailSecond,
            _self.phoneSecond,
            _self.companySecond,
            _self.subCity,
            _self.qqSecond,
            _self.value5,
            _self.remark,
            function(res) {
              if (res.code === 200) {
                _self.showEdit = true;
                _self.edithide = false;
                if (
                  _self.nickName !== "" ||
                  _self.nameReal !== "" ||
                  _self.emailSecond !== "" ||
                  _self.phoneSecond !== "" ||
                  _self.companySecond !== "" ||
                  _self.cityCurrent !== "" ||
                  _self.qqSecond !== "" ||
                  _self.remark !== ""
                ) {
                  _self.nickName = _self.nickName;
                  _self.realName = _self.nameReal;
                  _self.email = _self.emailSecond;
                  _self.phone = _self.phoneSecond;
                  _self.company = _self.companySecond;
                  _self.city = _self.subCity;
                  _self.qq = _self.qqSecond;
                  _self.remark = _self.remark;
                  _self.getCity(_self.subCity);
                }

                _self.getLabel();
              } else {

                if(res.error === "城市必须是数字"){
                    _self.$message({
                      message: '选择城市必须具体到区',
                      type: 'warning'
                    });
                    alert('选择城市必须具体到区');
                }else{
                    _self.$message({
                      message: res.error,
                      type: 'warning'
                    });
                }
              }
            }
          );
    },

    //修改城市
    changeProvince(value) {
      console.log(value);
      this.cityCurrent = value;
      this.subCity = value[2];
      this.city = value[2];
    },

    showUser() {
      this.showEdit = false;
      this.edithide = true;
    },

    cancelUser() {
      this.showEdit = true;
      this.edithide = false;
    }
  },

  mounted() {
    chat.addValidateListener(json => {
      this.getListLabels();
    });

    this.getshowAccess();
    //动态给聊天窗口添加height
    let winHeight = $(window).height();
    let height = winHeight - 120;
    $(".Main").css("height", height);
    $(window).resize(() => {
      winHeight = $(window).height();
      height = winHeight - 120;
      $(".Main").css("height", height);
    });
  }
};
</script>

<style>
body .el-tabs__header {
  margin: 0;
}

#mainTemplate {
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
#mainTemplate::-webkit-scrollbar {
  width: 2px;
  display: none;
}

.el-form-item__content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#mainTemplate::-webkit-scrollbar-track-piece {
  background-color: #fff;
}

/* 滚动条的内层滑轨背景颜色 */

#mainTemplate::-webkit-scrollbar-track {
  background-color: #fff;
}

/* 滚动条的外层滑轨背景颜色 */

#mainTemplate::-webkit-scrollbar-thumb {
  background-color: #d4d8e2;
}

/* 滚动条的内层滑块颜色 */

#mainTemplate::-webkit-scrollbar-button {
  background-color: #fff;
  display: none;
}

/* 滑轨两头的监听按钮颜色 */

#mainTemplate .el-select__tags > span {
  display: flex;
}

#mainTemplate a {
  text-decoration: none;
  color: #000;
}

#mainTemplate .oneItem .referer {
  width: 17rem;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#mainTemplate .imgBOX {
  width: 2rem;
}

#mainTemplate .imgBOX img {
  width: 100%;
  border-radius: 50%;
  display: block;
}

#mainTemplate .userImg {
  text-align: left;
  padding-left: 0.5rem;
}

#mainTemplate .userImg img {
  width: 2rem;
  vertical-align: middle;
}

#mainTemplate .notInfor {
  position: absolute;
  left: 36%;
  top: 33%;
}

#mainTemplate .notInfor .img {
  width: 6rem;
  height: 6rem;
  display: inline-block;
  background: url("../../assets/sad-circle-o.png") center center no-repeat;
  background-size: 6rem;
}

#mainTemplate .notInfor p {
  text-align: center;
  color: #bfbfbf;
  padding: 0;
  margin: 1rem 0;
}

#mainTemplate .avatar-uploader {
  width: 3rem;
}

#mainTemplate .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

#mainTemplate .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

#mainTemplate .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 3rem;
  height: 3rem;
  line-height: 3rem;
  text-align: center;
}

#mainTemplate .avatar {
  width: 3rem;
  height: 3rem;
  display: block;
}

#mainTemplate .infor {
  display: inline-block;
  width: 100%;
  text-align: left;
  padding: 0.6rem;
  font-size: 0.9rem;
  border-top: 1px solid #ced0d0;
  border-bottom: 1px solid #ced0d0;
}

#mainTemplate .cuos {
  margin: 1rem 0;
  position: relative;
}

#mainTemplate .cuos b {
  position: absolute;
  font-weight: 400;
  color: #ced0d0;
  right: 2rem;
}

#mainTemplate p {
  text-align: right;
  padding-right: 2rem;
}

.Main p a {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  background: url("../../assets/icon/write.png") center center no-repeat;
}

#mainTemplate .oneItem,
.secondItem {
  display: flex;
  width: 100%;
}

/* .secondItem ul:nth-child(2){
        width:
    } */

#mainTemplate .secondItem {
  flex-wrap: wrap;
}

#mainTemplate .secondItem p {
  text-align: left;
}

#mainTemplate ul:nth-child(2) {
  width: 60%;
}

#mainTemplate .el-select {
  width: 100%;
}

#mainTemplate .el-cascader {
  width: 100%;
}

#mainTemplate .el-select .el-tag {
  margin: 2px 0 2px 10px;
}

#mainTemplate .AccessInfor ul:first-child,
#mainTemplate .AccessInfor ul:last-child {
  line-height: 2.5rem;
}

#mainTemplate ul:first-child {
  width: 28%;
  line-height: 3rem;
}

#mainTemplate ul:first-child li {
  color: #acaeaf;
  font-size: 12px;
}

#mainTemplate ul {
  width: 50%;
  text-align: right;
  line-height: 3rem;
  color: #333;
}

#mainTemplate .oneItem ul:last-child li span {
  margin-right: 0.5rem;
}

#mainTemplate .oneItem ul:last-child li,
.secondItem ul:last-child li {
  font-size: 0.89rem;
}

#mainTemplate ul:last-child,
.secondItem ul:last-child li {
  text-align: left;
}

#mainTemplate .btnGroupEdit {
  width: 100%;
}

#mainTemplate .btnGroupEdit .el-button {
  font-size: 12px;
}
</style>
